/**
 *
 * @Description TODO
 * @Author liuer
 * @CreateTime 2024年04月19日 11:04
 */

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/src/extension_navigation.dart';
import 'package:yt_devops/components/log_utils.dart';
import 'package:yt_devops/pages/devices/device_tab/device_detail/new_air_cooling_page/temperature_full_chart/component/full_screen_back.dart';
import 'package:yt_devops/resources/str_res_keys.dart';

class PowerFullScreenChart extends StatelessWidget {
  final List<dynamic>? powerData;
  final List<dynamic>? powerUseRateData;
  final List<dynamic>? timeList;
  // final num powerMaxValue;
  // final num powerMinValue;
  const PowerFullScreenChart(
      {super.key,
      required this.powerData,
      required this.powerUseRateData,
      // required this.powerMaxValue,
      // required this.powerMinValue,
      required this.timeList});

  @override
  Widget build(BuildContext context) {
    // Log.d('ChargeStationTrendsChart===');
    return Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
            child: RotatedBox(
          quarterTurns: 1,
          child: Scaffold(
            backgroundColor: Colors.white,
            body: Column(
              children: [
                // Gaps.vGap10,
                FullScreenBack(() {
                  Log.d('back');
                  navigator?.pop();
                }),
                Expanded(
                    child: Container(
                  color: Colors.white,
                  padding: EdgeInsets.only(left: 0, right: 0),
                  child: Echarts(
                    captureAllGestures: false,
                    option: '''
      {
  /// 提示框
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,0.85)',
    borderWidth: 0,
    opacity: 0.2,
    confine: true,
    padding: [
      10, // 上
      8, // 右
      10, // 下
      8 // 左
    ],
    textStyle: {
      color: 'white'
    },
    axisPointer: {
      /// 坐标轴指示器配置项
      lineStyle: {
        color: 'rgba(0,0,0,0.09)',
        position: function (pt) {
          return [pt[0], 500];
        }
      }
    },

  },
  /// 坐标轴
  grid: {
    containLabel: true,
    top: '3%',
    left: '5%',
    right: '5%',
    bottom: 60
  },
  /// 横轴
  xAxis: {
    type: 'category',
    data: ${jsonEncode(timeList)},  
          splitLine: {
        lineStyle: {
          type: 'dashed', //虚线
        },
      },             
    axisLine:{
      show: false,
    }, 
    axisTick: {
      show: false
    }, 
    axisLabel: {
      color: '#999999',
      fontSize: 11,
      lineStyle: {
          type: 'dashed', //虚线
        },
      interval: function (index) { // 自定义间隔函数 
          if (index % 4 === 0) { // 每四小时显示一次  // 返回值是五分钟为一个间隔
              return true;
          } else {
              return false;
          }
      },
    },
  },
  yAxis: [
    {
      name: '',
      type: 'value',
    
              max:function (value) {
             return (typeof value.max === 'number' && isNaN(value.max))?1:null;
        },
       min:function (value) {
             return (typeof value.min === 'number' && isNaN(value.min))?0:null;
        },
        // max:100,
        // min: 0,
      // offset: 4,
        splitLine: {
        lineStyle: {
          type: 'dashed', //虚线
        },
      },
      axisLabel: {
        color: '#999999',
        fontSize: 11
      },
    },
    {
      name: '',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed', //虚线
        },
      },
      // min: 0,
      // max: 25,
      // interval: 5,
      offset: 4,
      axisLabel: {
        color: '#999999',
        fontSize: 11
      },
    }
  ],
    legend: {
    show: true,
    icon: 'rect',

    bottom:10,
    itemHeight: 3,
    itemWidth: 12,
     textStyle: {
      borderRadius: [2, 2, 2, 2]
    },
    padding: [
    0,  // 上
    0, // 右
    0,  // 下
    0, // 左
]
  },
    dataZoom: [
    {
      type: 'inside',
      realtime: false,
    },
    {
      start: 0,
       bottom: 40,
      end: 0,
      height: 10,
      realtime: false,
    },
  ],
  series: [
        {
      name: ${jsonEncode(ResKey.deviceDischargePower.tr)},
      type: 'line',
      data: ${jsonEncode(powerData)}      
    },
    {
      name: ${jsonEncode(ResKey.devicePowerUtilizationRate.tr)}, //功率利用率
      type: 'line',
       data: ${jsonEncode(powerUseRateData)}  
    },
  ]
}
      ''',
                  ),
                ))
              ],
            ),
          ),
        )));
  }
}
